<template>
	<view class="authorizationBox">
		<view class="authorizationTab">
			<view class="tab1">
				<u-icon name="checkmark-circle" color="#ffffff" size="36"></u-icon>
				<text style="margin-left: 16rpx;">微信登录</text>
			</view>
			<view class="tab2">
				<view class="circle">2</view>
				<text>员工认证</text>
			</view>
		</view>
		<view class="content">
			<view class="title">员工认证</view>
			<view>
				<view class="uni-list-cell-db1" style="margin-bottom: 40rpx;">
					<picker @change="companyChange" :value="CompanyIndex" :range="Companys">
						<view class="evRight">
							<view class="uni-input test">{{ Companys[CompanyIndex] }}</view>
							<u-icon name="arrow-right" color="#777777" size="28"></u-icon>
						</view>
					</picker>
				</view>
				<view class="uni-list-cell-db2" style="margin-bottom: 40rpx;">
					<input class="phone-input" type="number" v-model="staffNo" placeholder="输入员工工号" @input="staffNoInput"/>
				</view>
				<view class="uni-list-cell-db3" style="margin-bottom: 40rpx;">
					<input class="name-input" type="text" v-model="username" placeholder="输入员工姓名" @input="userNameInput"/>
				</view>
				<!-- <view class="tips">认证失败请输入正确的员工信息</view> -->
			</view>
			<view class="authorization" @tap="onAuthorization">认证</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					show: false,
					CompanyIndex:0,
					Companys:[],
					staffNo:'',
					username:'',
					list:[]
				}
			},
			onLoad() {
				this.getcompanys();
			},
			methods:{
				getcompanys(){
					var that=this;
					that.sendRequest({
						url : "/airport/list",
						method : "GET",
						data : {
						},
						hideLoading : true,
						success:function (res) {
							console.log(res)
							for(let i in res){
								that.list=res;
								var Company=res[i].name
								console.log(Company)
								// let defaultData='请选择所在单位';
								that.Companys.push(Company)
								// that.Companys.unshift(defaultData)
							}
							
							console.log(that.Companys,'this.Companys>>>>>')
						}
					})
				},
				//选择所在单位
				companyChange(e){
					console.log(e,'选择所在单位')
					this.CompanyIndex=e.target.value;
					console.log(this.CompanyIndex)
				},
				//工号
				staffNoInput(e) {
					this.staffNo = e.detail.value;
				},
				//姓名
				userNameInput(e){
					this.username = e.detail.value;
				},
				onAuthorization(){
					var that=this;
					var airportId=that.list[this.CompanyIndex].id;
					that.sendRequest({
						url : "/member/verify",
						method : "POST",
						data : {
							staffNo:that.staffNo,
							name:that.username,
							airportId:airportId
						},
						hideLoading : true,
						success:function (res) {
							console.log(res.status)
							if(res.status=='FAILED'){
								setTimeout(() => {
								uni.showToast({
								    title: res.errorMessage,
								    duration: 4000
								});
								},500)
							}else{
								uni.switchTab({
									url:'../index/index'
								})
							}
							
						}
					})
				}
			}
		}
</script>

<style>
	.authorizationBox{
		width: 100%;
		background-color: #4590E8;
	}
	.authorizationTab{
		margin: 238rpx 0 98rpx 150rpx;
		font-size: 36rpx;
		color:#FFFFFF;
		display: flex;
	}
	.tab1{
		display: flex;
		margin-right: 36rpx;
	}
	.tab2{
		display: flex;
		
	}
	.circle{
		width: 44rpx;
		height: 44rpx;
		background: #FFC400;
		border-radius: 50%;
		opacity: 1;
		margin-right: 16rpx;
		text-align: center;
	}
	.content{
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 24rpx;
		padding: 60rpx 42rpx;
		margin: 0 auto;
	}
	.title{
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		color: #323332;
		text-align: center;
		margin-bottom: 60rpx;
	}
	.uni-list-cell-db1 {
		height: 80rpx;
		line-height: 80rpx;
		background: #F8F8F8;
		border: 1rpx solid #EBEBEB;
		opacity: 1;
		border-radius: 16rpx;
		
	}
	.uni-list-cell-db2{
		height: 80rpx;
		line-height: 80rpx;
		background: #F8F8F8;
		border: 1rpx solid #EBEBEB;
		opacity: 1;
		border-radius: 16rpx;
	}
	 .uni-list-cell-db3{
		 height: 80rpx;
		 line-height: 80rpx;
		 background: #F8F8F8;
		 border: 1rpx solid #EBEBEB;
		 opacity: 1;
		 border-radius: 16rpx;
		 
	 }
	.evRight{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		align-items: center;
		padding: 0 32rpx;
	}
	.phone-input{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding: 0 32rpx;
	}
	.name-input{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding: 0 32rpx;
	}
	.tips{
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
		color: #F24848;
		text-align: center;
		margin-bottom: 60rpx;
	}
	.authorization{
		height: 80rpx;
		background: linear-gradient(89deg, #4EBFF9 0%, #4590E8 100%);
		box-shadow: 0px 6px 12px rgba(14, 92, 183, 0.44);
		opacity: 1;
		border-radius: 600rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
